<template>
  <div>
    <!-- 用户登录区域 -->
    <van-row @click="openModal">
      <van-col span="6">
        <img :src="avtiveSrc" alt />
      </van-col>
      <van-col span="15">{{Lgoinusername}}</van-col>
      <van-col span="3">
        <van-icon name="arrow" v-if="iconShow" />
        <van-icon name="cross" v-else  @click="outLogin"/>
      </van-col>
    </van-row>
    <!-- 选项列表区域 -->
    <van-grid :column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="bill-o" text="优惠卷" />
      <van-grid-item icon="photo-o" text="礼品卡" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="flag-o" text="我的足迹" />
      <van-grid-item icon="vip-card-o" text="会员福利" />
      <van-grid-item icon="guide-o" text="地址管理" />
      <van-grid-item icon="warn-o" text="账号安全" />
      <van-grid-item icon="service-o" text="联系客服" />
      <van-grid-item icon="question-o" text="帮助中心" />
      <van-grid-item icon="smile-comment-o" text="意见反馈" />
    </van-grid>

    <!-- 登录弹出层区域 -->
    <transition name="van-fade">
      <div class="login-modal" v-show="isShowModal">
      <div class="close-modal" @click="isShowModal=!isShowModal"></div>
      <van-form @submit="onSubmit" class="login-form">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    </transition>
  </div>
</template>

<script>
  import {login} from "@/network/api"

  export default {
    name: "User",
    // 组件刚创建的时候判断用户有没有登录，如果登录就获取sessionStorage里的userInfo的值渲染页面
    created() {
      if(sessionStorage.getItem('token')) {
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.avtiveSrc = userInfo.avatar
        this.Lgoinusername = userInfo.username
        this.iconShow = false
      }
    },
    data() {
      return  {
        // 头像
        avtiveSrc: require('../../assets/avatar.png'),
        username: '',
        password: '',
        // 控制登录弹出层的显示/隐藏
        isShowModal: false,
        // 系统匹配的昵称
        Lgoinusername: '用户登录',
        // 控制icon图标
        iconShow: true
      }
    },
    methods: {
      onSubmit(values) {
       const username = values["用户名"]
       const pwd = values["密码"]
       login(username,pwd).then(res => {
         if(res.errno == 0) {
           this.$toast.success('登录成功')
           console.log(res);
           sessionStorage.setItem('token', res.data.token)
           sessionStorage.setItem('userInfo',JSON.stringify(res.data.userInfo))
          //  this.userId =  res.data.userInfo.id
           setTimeout(() => {
             this.isShowModal = false
             this.avtiveSrc = res.data.userInfo.avatar
             this.Lgoinusername = res.data.userInfo.username
             this.iconShow = false
           }, 1000);
         }
       })
      },
      // 登录过后不允许登录弹出层弹出
      openModal() {
        if(sessionStorage.getItem('token')) return
        this.isShowModal = true
      },
      // 退出登录
      outLogin() {
       this.$dialog.confirm({
         title: '登出账号确认',
         message: '是否想要退出当前账号?',
        })
        .then(() => {
          this.$toast.success('您已退出登录')
          sessionStorage.clear()
          setTimeout(() => {
            this.avtiveSrc = require('../../assets/avatar.png')
            this.Lgoinusername = '用户登录'
            this.iconShow = true
          }, 1000);
        })
        .catch(() => {

        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-modal {
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    .login-form {
      width: 90%;
      background-color: #fff;
      padding: .2rem 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 35%;
    }
    .close-modal {
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
    }
  }
  .van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.18rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
</style>